<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/resources/css/font.css">
    <link rel="stylesheet" href="/resources/css/xadmin.css">
    <script src="/resources/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/resources/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<!-- @formatter:off -->
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form layui-col-space5">
                            <div class="layui-input-inline layui-show-xs-block"><input type="text" name="id" placeholder="请输入客户编号" class="layui-input"></div>
                            <div class="layui-input-inline layui-show-xs-block"><input type="text" name="name" placeholder="请输入客户姓名" class="layui-input"></div>
                            <div class="layui-input-inline layui-show-xs-block"><input type="text" name="mail" placeholder="请输入客户邮箱" class="layui-input"></div>
                            <div class="layui-input-inline layui-show-xs-block">
                                <select id="status" name="status">
                                    <option value="">请选择状态</option>
                                    <option value="未开始">有效</option>
                                    <option value="无效">无效</option>
                                </select>
                            </div>
                            <div class="layui-input-inline layui-show-xs-block">
                                <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                            </div>
                            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新"><i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
                        </form>
                    </div>
                    <div class="layui-card-header">
                        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
                        <button class="layui-btn" onclick="xadmin.open('添加用户','/plan/customer-add', 800, 600)"><i class="layui-icon"></i>添加</button>
                    </div>
                    <div class="layui-card-body"><table class="layui-table layui-form" lay-filter="test" id="customerTable"></table></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/html" id="tools">
    <button class="layui-btn layui-btn-xs" lay-event="image">查看图片</button>
    <button class="layui-btn layui-btn-xs" lay-event="edit" onclick="xadmin.open('商品编辑','/plan/customer-edit')">编辑</button>
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
</script>
<!-- @formatter:on -->

<script>
    layui.config({
        base: '', // 设定 Layui 扩展模块的所在目录，一般与 extend 方法搭配使用
        version: false, // 用于更新模块缓存，默认 false。若设为 true，即让浏览器不缓存。也可设为一个任意数值
        dir: 'layui/', // layui 基础目录，用于动态导入 src/layui.js 时的内置模块的加载。一般无需设置
        debug: true // 用于开启调试模式，默认 false。若设为 true，则模块的引入节点会保留在页面
    });

    layui.use(function () {
        let layer = layui.layer;
        let table = layui.table;
        let form = layui.form;
        let date = layui.laydate;

        table.render({
            elem: '#customerTable',
            even: true,    //隔行换色
            page: true, //开启分页
            url: '/plan/customerDetail',
            // 将原始数据解析成 table 组件所规定的数据格式
            parseData: function (result) {
                window.array = result;
                return {
                    "msg": result.msg, //解析提示文本
                    "count": result.total, //解析数据长度
                    "code": result.code == 200 ? 0 : -1,
                    "data": result.data //解析数据列表
                };
            },
            cols: [[
                {type: 'checkbox', fixed: 'left'}, //开启多选框
                {field: 'id', title: '客户编号', sort: true, align: 'center'},
                {field: 'name', title: '客户名称', align: 'center'},
                {field: 'fullName', title: '客户全称', align: 'center'},
                {field: 'address', title: '地址', align: 'center'},
                {field: 'fax', title: '客户传真', align: 'center'},
                {field: 'mail', title: '邮件', align: 'center'},
                {field: 'manager', title: '经理姓名', align: 'center'},
                {field: 'phone', title: '联系电话', align: 'center'},
                {field: 'status', title: '客户状态', align: 'center'},
                {field: 'introduce', title: '介绍', event: 'introduce', align: 'center'},
                {fixed: 'right', title: "操作", width: '18%', align: 'center', toolbar: '#tools'}
            ]]
        })

        table.on('tool(test)', function (obj) {
            //获得当前行数据
            let rowData = obj.data;

            //获得当前行 tr 的 DOM 对象
            // let tr = obj.tr;

            //获取被点击列的客户id
            // let customerId = obj.data.id;

            //通过客户id从数组中查询客户信息
            // let customerDetail = array.data[customerId - 1];

            if (obj.event === 'customerName') {

                //回填值
                document.getElementById("requirement").value = rowData.requirement;

                layer.open({
                    type: 1,
                    title: "订单要求",
                    area: ['50%', '80%'],
                    btn: ['确定'],
                    content: $('#required'),
                    yes: function (index, layero) {
                        reload();
                    }
                });
            } else if (obj.event === 'edit') {
                sessionStorage.setItem('editData', JSON.stringify(rowData));
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除？', {icon: 3}, function (index) {
                    let deleteArray = [obj.data];
                    //向服务端发送删除指令
                    $.ajax({
                        url: "/plan/customerDelete",
                        type: "post",
                        data: JSON.stringify(deleteArray),
                        //不要处理数据
                        processData: false,
                        //不要设置content-type请求头
                        contentType: "application/json",
                        success: function (res) {
                            if (res.code == 200) {
                                //删除对应行（tr）的DOM结构，并更新缓存
                                obj.del();
                                layer.close(index);
                                layer.msg("删除成功");
                                reload();
                            } else {
                                layer.msg(res.msg);
                            }
                        }
                    })
                });
            }
        })

        form.on('submit(search)', function (data) {
            let field = data.field; // 获得表单字段

            // 执行搜索重载
            table.reload('customerTable', {
                url: "/plan/customerDetail",
                // 搜索的字段
                where: field
            });
            // 阻止默认 form 跳转
            return false;
        });

        //执行一个date实例
        date.render({
            elem: '#start' //指定元素
        });

        //执行一个date实例
        date.render({
            elem: '#end' //指定元素
        });

        //重新渲染表格方法
        window.reload = function () {
            // 重新渲染表格
            table.reloadData('customerTable', {
                // 设定重载数据或切换分页时的滚动条的位置状态
                scrollPos: true,
            });
        }
    })

    // 批量删除
    function delAll() {
        let table = layui.table.checkStatus("customerTable");
        //获取选中行数据
        let data = table.data;
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                url: '/plan/customerDelete',
                method: 'post',
                data: JSON.stringify(data),
                contentType: 'application/json',
                success: function (data) {
                    layer.msg(data.msg);
                    reload();
                },
                error: function (data) {
                    layer.msg("网络错误");
                }
            })
        });
    }

</script>

</html>